<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>redux原理,自己实现</title>
</head>
<body>
    <div>
        <!-- <button onclick="jian()">-</button> -->
        <!-- <button onclick="dispath({type: 'JIAN', n: 1})">-</button> -->
        <button onclick="store.dispath({type: 'JIAN', n: 1})">-</button>
        <span id="countDisplay">10</span>
        <!-- <button onclick="dispath({type: 'JIA', n: 1})">+</button> -->
        <button onclick="store.dispath({type: 'JIA', n: 1})">+</button>
    </div>
    <script>
        const countDisplay = document.querySelector('#countDisplay')
        const countState = {
            count: 5
        }

        // const renderCount = (state) => {
        //     countDisplay.innerHTML = state.count
        // }
        // renderCount(countState)

        // const jian = (n) => {
        //     // countState.count = countState.count - 1
        //     countState.count = countState.count - n
        //     renderCount(countState)
        // }
        
        // const changeState = (action) => {
        //     switch(action.type) {
        //         case 'JIAN': 
        //             countState.count = countState.count - action.n
        //             break;
        //         case 'JIA': 
        //             countState.count = countState.count + action.n
        //             break;
        //         default:
        //             break;
        //     }
        // }
        // const dispath = (action) => {
        //     changeState(action)
        //     renderCount(countState)
        // }

        // 改造
        // const changeState = (state, action) => {
        //     switch(action.type) {
        //         case 'JIAN': 
        //             state.count = state.count - action.n
        //             break;
        //         case 'JIA': 
        //             state.count = state.count + action.n
        //             break;
        //         default:
        //             break;
        //     }
        // }
        // const createStore = (state, changeState) => {
        //     const getState = () => state
        //     const listeners = []
        //     const subscribe = listener => listeners.push(listener)    // 添加监听的动作
        //     const dispath = (action) => {
        //         changeState(state, action)
        //         listeners.forEach(listener => listener())    // 所有动作执行一次
        //     }
        //     return {
        //         getState,
        //         dispath,
        //         subscribe
        //     }
        // }
        // const store = createStore(countState, changeState)

        // 再改造
        const changeState = (state, action) => {
            if(!state) {
                return state
            }
            switch(action.type) {
                case 'JIAN': 
                    return {
                        ...state,
                        count: state.count - action.n
                    }
                    break;
                case 'JIA': 
                    return {
                        ...state,
                        count: state.count + action.n
                    }
                    break;
                default:
                    return state;
            }
        }
        const createStore = (changeState) => {
            const state = null
            const getState = () => state
            const listeners = []
            const subscribe = listener => listeners.push(listener)    // 添加监听的动作
            const dispath = (action) => {
                state = changeState(state, action)
                listeners.forEach(listener => listener())    // 所有动作执行一次
            }
            dispath({})                    // 初始化
            return {
                getState,
                dispath,
                subscribe
            }
        }
        const store = createStore(changeState)


        const renderCount = () => {
            countDisplay.innerHTML = store.getState().count
        }
        renderCount()

        store.subscribe(renderCount)
    </script>
</body>
</html>